<template>
  <view class="mask" style="display: flex; align-items: center; justify-content: center">
    <view class="bg">
      <view class="rotary-table">
        <mosowe-rotary-table
          ref="rotaryTableRef"
          :list="list"
          :radius="280"
          @start="start"
          @end="end"
        ></mosowe-rotary-table>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const list = [
  {
    title: '保温壶',
    bgColor: '#fff',
    color: '#E31010',
    size: '36rpx',
  },
  {
    title: '春联',
    bgColor: '#FDEEAB',
    color: '#E31010',
    size: '36rpx',
  },
  {
    title: '卫生纸',
    bgColor: '#fff',
    color: '#E31010',
    size: '36rpx',
  },
  {
    title: '洗衣液',
    bgColor: '#FDEEAB',
    color: '#E31010',
    size: '36rpx',
  },
  {
    title: '雨伞',
    bgColor: '#fff',
    color: '#E31010',
    size: '36rpx',
  },
  {
    title: '手机',
    bgColor: '#FF1F05',
    color: '#fff',
    size: '36rpx',
  },
]
const rotaryTableRef = ref<any>(null)
// 点击中心抽奖按钮
const start = () => {
  rotaryTableRef.value?.begin() // 开始转
  // ...中间请求下接口，查询中奖序号
  setTimeout(() => {
    // 准备结束转动，参数数字代表中奖项，即list列表的第几个，从1开始算
    rotaryTableRef.value?.stop(1)
  }, 1000)
}
// 转盘停止转动
const end = () => {
  uni.showToast({
    title: '66666666',
  })
}
</script>

<style lang="scss" scoped>
.mask {
  width: 100vw;
  height: 100%;
  background: #000;
  position: fixed;
  left: 0;
  top: 0;
}

.bg {
  padding: 60rpx;
  background-image: url(@/static/images/staticbg.png);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
}
</style>
